<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.input.type" style="width: 130px">
            <el-option label="开发需求单号" value="develop_no"></el-option>
            <el-option label="备料计划单号" value="plan_no"></el-option>
            <el-option label="备货需求单号" value="demand_no"></el-option>
            <el-option label="采购单号" value="purchase_no"></el-option>
            <el-option label="头程出库单号" value="deliver_no"></el-option>
          </el-select>
          <VBatchInput
            v-model="form.input.value"
            placeholder="请输入"
            class="w-40"
            @search="query"
          />
        </VGroup>
        <VSelect
          v-model="form.develop_type"
          :options="options.develop_type"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="新品类型"
        />
        <VSelect
          v-model="form.demand_status"
          :options="options.demand_status"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="需求状态"
        />
        <VGroup>
          <el-select v-model="form.no.type" style="width: 130px">
            <el-option label="sku" value="sku"></el-option>
            <el-option label="asin" value="asin"></el-option>
          </el-select>
          <VBatchInput
            v-model="form.no.value"
            placeholder="请输入"
            class="w-40"
            @search="query"
          />
        </VGroup>
        <VSelect
          v-model="form.country"
          :options="options.country"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="国家"
        />
        <VSelect
          v-model="form.develop_status"
          :options="options.develop_status"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="新品状态"
        />
        <VGroup>
          <el-select v-model="form.demand.type" style="width: 130px">
            <el-option label="需求仓" value="destination_warehouse"></el-option>
            <el-option
              label="需求平台"
              value="platform_destination_warehouse"
            ></el-option>
          </el-select>
          <VSelect
            v-model="form.demand.value"
            :options="options[form.demand.type]"
            multiple
            collapse-tags
            style="min-width: 160px"
            placeholder="请选择"
          />
        </VGroup>
        <VSelect
          v-model="form.transport_type"
          :options="options.transport_type"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="运输方式"
        />
        <VGroup>
          <el-select v-model="form.user.type" style="width: 130px">
            <el-option label="申请人员" value="create_user_id"></el-option>
            <el-option label="销售人员" value="sale_id"></el-option>
            <el-option label="计划人员" value="plan_user_id"></el-option>
          </el-select>
          <VCascader
            v-model="form.user.value"
            placeholder="请选择"
            multiple
            collapse-tags
            style="min-width: 160px"
          />
        </VGroup>
        <VGroup>
          <el-select v-model="form.dept.type" style="width: 130px">
            <el-option
              label="申请人部门"
              value="create_department_name"
            ></el-option>
            <el-option
              label="销售部门"
              value="sale_department_name"
            ></el-option>
          </el-select>
          <VCascader
            v-model="form.dept.value"
            placeholder="请选择"
            type="department"
            multiple
            collapse-tags
            checkStrictly
            style="min-width: 160px"
          />
        </VGroup>
        <VSelect
          v-model="form.is_delay"
          :options="options.is_delay"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="是否延期"
        />
        <VSelect
          v-model="form.demand_type"
          :options="options.demand_type"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="需求类型"
        />
        <VSelect
          v-model="form.is_purchase"
          :options="options.is_purchase"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="是否有采购单"
        />
        <VSelect
          v-model="form.is_deliver"
          :options="options.is_deliver"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="是否有头程单"
        />
        <VGroup>
          <el-select v-model="form.dateRange.type" style="width: 130px">
            <el-option label="申请日期" value="create_time"></el-option>
            <el-option label="审核日期" value="audit_time"></el-option>
            <el-option label="需求交货日期" value="develop_time"></el-option>
            <el-option
              label="预计下单日期"
              value="except_order_time"
            ></el-option>
            <el-option
              label="预计上架日期"
              value="except_shelves_time"
            ></el-option>
          </el-select>
          <VDate v-model="form.dateRange.value" />
        </VGroup>

        <VSelect
          v-model="form.platform"
          :options="options.platform"
          multiple
          collapse-tags
          style="min-width: 160px"
          placeholder="平台"
        />
        <VCascader
          v-model="form.develop_department_name"
          placeholder="开发部门"
          type="department"
          multiple
          collapse-tags
          checkStrictly
          style="min-width: 160px"
        />
        <teleport v-if="demandTabsLoad" to="#demand-tabs">
          <el-tabs v-model="form.type" @tab-change="tabChange">
            <el-tab-pane
              v-for="(d, i) in options.type"
              :key="i"
              :label="`${d.label}(${d.num || 0})`"
              :name="d.value"
            ></el-tab-pane>
          </el-tabs>
        </teleport>
      </template>
      <template #toolbar_btns>
        <div
          id="demand-tabs"
          class="w-full"
          v-dom-load="() => (demandTabsLoad = true)"
        ></div>
        <VButton
          type="primary"
          auth="/purchase/demand/new-product/add"
          @click="handleAdd(null)"
          :loading="loading"
          >添加开发新品需求</VButton
        >
        <VButton
          auth="/purchase/demand/new-product/process_plan"
          type="primary"
          @click="handleBatch('process_plan')"
          :loading="loading"
          >生成备料计划</VButton
        >
        <VButton
          auth="/purchase/demand/new-product/process_demand"
          type="primary"
          @click="handleBatch('process_demand')"
          :loading="loading"
          >生成备库需求单</VButton
        >
        <VButton
          auth="/purchase/demand/new-product/submit"
          type="primary"
          @click="handleBatch('submit')"
          :loading="loading"
          >批量提交</VButton
        >
        <VAudit
          auth="/purchase/demand/new-product/audit"
          field="dd_id"
          url="/v1/purchase-demand/develop-demand/batch-audit"
          :tableRef="tableRef"
          @success="query"
        />
        <VButton
          auth="/purchase/demand/new-product/receive"
          @click="handleBatch('receive')"
          :loading="loading"
          >计划接收</VButton
        >
        <VButton
          auth="/purchase/demand/new-product/cancel"
          @click="handleBatch('cancel')"
          :loading="loading"
          >批量作废</VButton
        >
        <VButton
          auth="/purchase/demand/new-product/planner"
          @click="handleBatch('planner')"
          :loading="loading"
          >调整计划员</VButton
        >
        <VButton
          auth="/purchase/demand/new-product/un_audit"
          @click="handleBatch('un_audit')"
          :loading="loading"
          >批量反审</VButton
        >
        <VTotal
          :data="total"
          :options="[{ title: '总需求sku个数', key: 'sku_num' }]"
          class="ml-auto"
        />
        <VButton
          auth="/purchase/demand/new-product/plan_allot"
          @click="handlePlanSet"
          class="ml-auto"
          :loading="loading"
          >计划人员分配</VButton
        >
        <VImport
          auth="/purchase/demand/new-product/import"
          :tableRef="tableRef"
          importUrl="/v1/purchase-demand/develop-demand/import"
          downloadUrl="https://xc-pms.oss-cn-shenzhen.aliyuncs.com/template/develop_demand_template.xlsx"
          @success="query"
        />
        <VExport
          auth="/purchase/demand/new-product/export"
          mainKey="dd_id"
          :name="baseName"
          :tableRef="tableRef"
          task
        />
      </template>
      <template #operation="{ row }">
        <!-- status 1待提交2待审核3审核中4待计划接受5待生成单据6已生成单据7驳回8已作废 -->
        <div class="nm flex flex-wrap gap-x-2 gap-y-1">
          <VButton
            v-if="[1, 7].includes(row.demand_status)"
            link
            auth="/purchase/demand/new-product/edit"
            type="primary"
            @click="handleAdd(row.dd_id)"
            :loading="loading"
            >编辑</VButton
          >
          <VButton
            auth="/purchase/demand/new-product/submit"
            v-if="[1, 7].includes(row.demand_status)"
            link
            type="primary"
            @click="handleRow('submit', row)"
            :loading="loading"
            >提交</VButton
          >
          <VButton
            auth="/purchase/demand/new-product/receive"
            v-if="[4].includes(row.demand_status)"
            link
            type="primary"
            @click="handleRow('receive', row)"
            :loading="loading"
            >计划接收</VButton
          >
          <VButton
            auth="/purchase/demand/new-product/process_plan"
            v-if="[5].includes(row.demand_status) && row.develop_type == 1"
            link
            type="primary"
            @click="handleRow('process_plan', row)"
            :loading="loading"
            >生成备料计划</VButton
          >
          <VButton
            auth="/purchase/demand/new-product/process_demand"
            v-if="[5].includes(row.demand_status) && row.develop_type == 2"
            link
            type="primary"
            @click="handleRow('process_demand', row)"
            :loading="loading"
            >生成备库需求单</VButton
          >
          <VButton
            auth="/purchase/demand/new-product/un_audit"
            v-if="[5].includes(row.demand_status)"
            @click="handleRow('un_audit', row)"
            link
            type="primary"
            :loading="loading"
            >反审</VButton
          >
          <VButton
            auth="/purchase/demand/new-product/cancel"
            v-if="[5].includes(row.demand_status)"
            @click="handleRow('cancel', row)"
            link
            type="primary"
            :loading="loading"
            >作废</VButton
          >
          <VButton
            link
            type="primary"
            @click="handleRow('log', row)"
            :loading="loading"
            >日志</VButton
          >
        </div>
      </template>
    </VTable>
    <AdjustPlan ref="adjustPlanRef" @success="query" />
    <Receive
      ref="receiveRef"
      @success="query"
      :options="options.plan_reject_reason"
    />
    <PlanSetting
      ref="planSettingRef"
      @success="query"
      :options="options.demand_type"
    />
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
<script setup lang="jsx">
import { ElMessage, ElMessageBox } from "element-plus";
import { resMessage } from "@/utils/res";
import { getOption } from "@/api/public";
import VTotal from "@/components/VTotal";
import VImport from "@/components/VImport";
import { to } from "@/utils/action";
const router = useRouter();
import {
  purchaseDemandTotal,
  purchaseDemandList,
  purchaseDemandBatchSubmit,
  purchaseDemandBatchCancel,
  purchaseDemandProcessPlan,
  purchaseDemandProcessDemand,
  getGoodsSku,
  auditBack,
} from "./api.js";
import AdjustPlan from "./components/adjustPlan/index";
import Receive from "./components/Receive/index";
import PlanSetting from "./components/planSetting/index";
import Add from "./components/Add/index";
const baseName = "develop_demand";
// 获取options
const options = ref({});
const total = ref({});
Promise.all([
  getOption({ type: "purchase_demand_change" }).then((res) => res.data),
  getOption({ type: baseName }).then((res) => res.data),
  Promise.resolve({ test: [{ label: "没有数据", value: 1 }] }),
]).then((res) => {
  options.value = res.reduce(
    (acc, cur) => ((acc = { ...acc, ...cur }), acc),
    {}
  );
  getTotal();
});

// 获取状态数量
const getTotal = async (params = { type: 0 }) => {
  if (!options.value.type) return;
  await purchaseDemandTotal(params).then((res) => {
    const { sku_num, label_total } = res?.data || {};
    total.value = { sku_num };
    options.value.type.forEach((t) => {
      t.num = label_total?.find((d) => d.value === t.value)?.num || 0;
    });
  });
};
const tabValue = ref(0);
const tabChange = (name) => {
  tabValue.value = name;
  query();
};
const tableRef = ref();
const addRef = ref();
const handleAdd = (id, isLook = false) => {
  addRef.value.open(id, isLook);
};
const demandTabsLoad = ref(false);
const loading = ref(false);
const adjustPlanRef = ref();
const receiveRef = ref();
//批量操作
const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords();
  if (!selection.length) {
    ElMessage.warning("请先选择行");
    return;
  }
  const dd_ids = selection.map((d) => d.dd_id);
  const handle = {
    submit: () => {
      loading.value = true;
      purchaseDemandBatchSubmit({ dd_ids })
        .then((res) => {
          resMessage({
            res,
            success: () => {
              ElMessage.success("操作成功");
              query();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    },
    cancel: () => {
      ElMessageBox.confirm("是否确认作废？", "取消", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          loading.value = true;
          purchaseDemandBatchCancel({ dd_ids })
            .then((res) => {
              resMessage({
                res,
                success: () => {
                  ElMessage.success("操作成功");
                  query();
                },
              });
            })
            .finally(() => {
              loading.value = false;
            });
        })
        .catch(() => {
          ElMessage({ type: "info", message: "取消操作" });
        });
    },
    un_audit: () => {
      ElMessageBox.confirm("是否确认反审？", "反审", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          loading.value = true;
          auditBack({ dd_ids })
            .then((res) => {
              resMessage({
                res,
                success: () => {
                  ElMessage.success("操作成功");
                  query();
                },
              });
            })
            .finally(() => {
              loading.value = false;
            });
        })
        .catch(() => {
          ElMessage({ type: "info", message: "取消操作" });
        });
    },
    planner: () => {
      adjustPlanRef.value.open(dd_ids);
    },
    receive: () => {
      receiveRef.value.open(dd_ids);
    },
    process_plan: () => {
      loading.value = true;
      purchaseDemandProcessPlan({ dd_ids })
        .then((res) => {
          resMessage({
            res,
            success: () => {
              ElMessage.success("操作成功");
              query();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    },
    process_demand: () => {
      loading.value = true;
      purchaseDemandProcessDemand({ dd_ids })
        .then((res) => {
          resMessage({
            res,
            success: () => {
              ElMessage.success("操作成功");
              query();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    },
  };
  handle[name]();
};

const planSettingRef = ref();
const handlePlanSet = () => {
  planSettingRef.value.open();
};
//单行操作
const logRef = ref();
const handleRow = (name, row) => {
  const { dd_id } = row;
  const handle = {
    receive: () => {
      receiveRef.value.open([dd_id]);
    },
    process_plan: () => {
      loading.value = true;
      purchaseDemandProcessPlan({ dd_ids: [dd_id] })
        .then((res) => {
          resMessage({
            res,
            success: () => {
              ElMessage.success("操作成功");
              query();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    },
    process_demand: () => {
      loading.value = true;
      purchaseDemandProcessDemand({ dd_ids: [dd_id] })
        .then((res) => {
          resMessage({
            res,
            success: () => {
              ElMessage.success("操作成功");
              query();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    },
    submit: () => {
      loading.value = true;
      purchaseDemandBatchSubmit({ dd_ids: [dd_id] })
        .then((res) => {
          resMessage({
            res,
            success: () => {
              ElMessage.success("操作成功");
              query();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    },
    log: () => {
      logRef?.value.open({ log_type: baseName, dd_id });
    },
    cancel: () => {
      ElMessageBox.confirm("是否确认作废？", "取消", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          loading.value = true;
          purchaseDemandBatchCancel({ dd_ids: [dd_id] })
            .then((res) => {
              resMessage({
                res,
                success: () => {
                  ElMessage.success("操作成功");
                  query();
                },
              });
            })
            .finally(() => {
              loading.value = false;
            });
        })
        .catch(() => {
          ElMessage({ type: "info", message: "取消操作" });
        });
    },
    un_audit: () => {
      ElMessageBox.confirm("是否确认反审？", "反审", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          loading.value = true;
          auditBack({ dd_ids: [dd_id] })
            .then((res) => {
              resMessage({
                res,
                success: () => {
                  ElMessage.success("操作成功");
                  query();
                },
              });
            })
            .finally(() => {
              loading.value = false;
            });
        })
        .catch(() => {
          ElMessage({ type: "info", message: "取消操作" });
        });
    },
    sku: () => {
      getGoodsSku({ sku: [row.sku] }).then((res) => {
        to({
          path: "/goods/task/product/edit",
          query: {
            type: "view",
            spuId: res.data?.[0].spu_id,
            sku: res.data?.[0].custom_sku,
          },
        });
      });
    },
  };
  handle[name]();
};

const handlePath = (row, value, path) => {
  sessionStorage.setItem(
    "_table_form",
    JSON.stringify({
      tableForm: { input: { type: value, value: row[value] } },
    })
  );
  router.push(path);
};
// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 200 },
  showHeaderOverflow: false,
  formConfig: {
    data: {
      type: 0,
      input: { type: "develop_no", value: "" }, // 组合
      no: { type: "sku", value: "" }, // 组合
      demand: { type: "destination_warehouse", value: "" }, // 组合
      user: { type: "create_user_id", value: "" }, // 组合
      dept: { type: "create_department_name", value: "" }, // 组合
      dateRange: { type: "create_time", value: [], range: true }, // 组合
    },
  },
  columns: [
    { type: "checkbox", fixed: "left", width: 40 },
    {
      title: "开发需求单号",
      minWidth: 220,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row.develop_no} type="link" copy>
              <el-link
                type="primary"
                onClick={() => handleAdd(row.dd_id, true)}
              >
                {row.develop_no}
              </el-link>
            </VText>
            <VText value={row.develop_type_name} title="新品类型" />
            <VText value={row.demand_type_name} title="需求类型" />
            <VText value={row.create_user} title="申请人" />
            <VText value={row.create_department_name} title="申请部门" />
            <VText value={row.create_time} title="申请时间" />
            <VText value={row.audit_time} title="审核时间" />
            <VText value={row.plan_user_name} title="计划员" />
          </div>
        ),
      },
    },
    {
      title: "产品图片",
      field: "main_img",
      minWidth: 100,
      slots: {
        default: ({ row }) => <VImage src={row.main_img} size="80px"></VImage>,
      },
    },
    {
      title: "sku信息",
      minWidth: 180,
      slots: {
        default: ({ row }) => (
          <div>
            {row?.is_delay == 2 && (
              <el-tag type="danger" class="mb-[4px]">
                延期{row?.delay_day || 0}天
              </el-tag>
            )}
            <VText title="sku" value={row.sku} type="link" copy>
              <el-link type="primary" onClick={() => handleRow("sku", row)}>
                {row.sku}
              </el-link>
            </VText>
            <div class="font-bold text-red-600">需求数量:{row.develop_num}</div>
            <VText value={row.is_combination ? "是" : "否"} title="组合SKU" />
            <VText value={row.demand_type_name} title="需求类型" />
            <VText value={row.logistics_attributes_name} title="物流属性" />
            <VText value={row.develop_status_name} title="新品状态" />
            <VText value={row.sku_cn_title} line={2} />
          </div>
        ),
      },
    },
    {
      title: "销售信息",
      minWidth: 166,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row.country_name} />
            <div
              class={`mr-2 icon zhandian-iconfont mb-2 mt-2 icon-zhandian_${row?.country?.toLowerCase()}`}
            ></div>
            <VText value={row.asin} />
            <VText value={row.platform_name} />
            <VText value={row.sale_department_name} />
            <VText value={row.sale_name} title="销售" />
            <VText value={row.destination_warehouse_name} title="需求仓" />
            <VText value={row.transport_type_name} title="运输方式" />
          </div>
        ),
      },
    },
    {
      title: "开发部门",
      minWidth: 200,
      field: "develop_department_name",
      line: 2,
    },
    {
      title: "供应信息",
      minWidth: 280,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row.supplier_name} title="供应商名称" />
            <VText value={row.supplier_code} title="供应商id" />
            <VText value={row.factory_area_name} title="供应商地址" line={2} />
          </div>
        ),
      },
    },
    {
      title: "数量信息",
      minWidth: 166,
      slots: {
        default: ({ row }) => (
          <div>
            <div class="font-bold text-red-600">
              需求金额:{row?.total_price || 0}
            </div>
            <VText value={row.demand_num} title="已建PR" />
            <VText value={row.wait_demand_num} title="未建PR" />
          </div>
        ),
      },
    },
    {
      title: "时间信息",
      minWidth: 190,
      slots: {
        default: ({ row }) => (
          <div>
            <VText value={row.develop_time} title="需求交货日期" />
            <VText value={row.except_order_time} title="预计下单日期" />
            <VText value={row.except_shelves_time} title="预计上架日期" />
          </div>
        ),
      },
    },
    {
      title: "审核状态",
      minWidth: 190,
      slots: {
        default: ({ row }) => (
          <div>
            <span
              className={`font-bold ${
                row.demand_status !== 8
                  ? "text-red-600"
                  : "bg-red-600 text-white p-[4px] rounded-[8px]"
              }`}
            >
              {row.demand_status_name}
            </span>
            <div>{row.next_audit_role_name}</div>
          </div>
        ),
      },
    },
    {
      title: "飞书审核状态",
      minWidth: 190,
      slots: {
        default: ({ row }) => (
          <div>
            <div>
              <VText value={row.feishu_audit_status_name} title="状态" />
            </div>
            <VText value={row.feishu_next_audit_name} title="节点" />
          </div>
        ),
      },
    },
    {
      title: "驳回原因",
      minWidth: 120,
      slots: {
        default: ({ row }) => (
          <VText value={row.plan_reject_reason_name} line={3} />
        ),
      },
    },
    {
      title: "备料信息",
      field: "remark",
      minWidth: 250,
      slots: {
        default: ({ row }) => {
          const { plan } = row;
          return (
            <div>
              <VText value={plan.plan_no} type="link" title="备料单号" copy>
                <el-link
                  type="primary"
                  onClick={() => handlePath(plan, "plan_no", "/demand/plan")}
                >
                  {plan.plan_no}
                </el-link>
              </VText>
              <VText value={plan.destination_warehouse_name} title="目的仓" />
              <VText value={plan.plan_num} title="需求数量" />
              <VText value={plan.create_time} title="创建日期" />
              <VText value={plan.audit_time} title="审核通过日期" />
            </div>
          );
        },
      },
    },
    {
      title: "备库需求信息",
      field: "demand",
      minWidth: 250,
      slots: {
        default: ({ row, rowIndex }) => (
          <div>
            <VMore key={rowIndex}>
              {{
                default: (line) =>
                  (row.demand || []).map((d) => (
                    <div class="w-full">
                      <VText
                        value={d.demand_no}
                        type="link"
                        title="需求单号"
                        line={line}
                        copy
                      >
                        <el-link
                          type="primary"
                          onClick={() =>
                            handlePath(d, "demand_no", "/demand/demand")
                          }
                        >
                          {d.demand_no}
                        </el-link>
                      </VText>
                      <VText
                        value={d.demand_type}
                        title="备库类型"
                        line={line}
                      />
                      <VText
                        value={d.destination_warehouse_name}
                        title="目的仓"
                        line={line}
                      />
                      <VText
                        value={d.demand_time}
                        title="需求日期"
                        line={line}
                      />
                      <VText
                        value={d.demand_num}
                        title="需求数量"
                        line={line}
                      />
                      <VText
                        value={d.create_time}
                        title="创建日期"
                        line={line}
                      />
                      <VText
                        value={d.audit_time}
                        title="审核通过日期"
                        line={line}
                      />
                    </div>
                  )),
              }}
            </VMore>
          </div>
        ),
      },
    },
    {
      title: "采购单信息",
      field: "remark",
      minWidth: 240,
      slots: {
        default: ({ row, rowIndex }) => (
          <div>
            <VMore key={rowIndex}>
              {{
                default: (line) =>
                  (row.purchase || []).map((d) => (
                    <div class="w-full">
                      <VText
                        value={d.purchase_no}
                        type="link"
                        title="采购单号"
                        line={line}
                        copy
                      >
                        <el-link
                          type="primary"
                          onClick={() =>
                            handlePath(d, "purchase_no", "/manage/purchase")
                          }
                        >
                          {d.purchase_no}
                        </el-link>
                      </VText>
                      <VText
                        value={d.supplier_coding}
                        title="供应商代码"
                        line={line}
                      />
                      <VText
                        value={d.prepare_type_name}
                        title="备货方式"
                        line={line}
                      />
                      <VText
                        value={d.destination_warehouse_name}
                        title="发货仓"
                        line={line}
                      />
                      <VText
                        value={d.purchase_user_name}
                        title="采购员"
                        line={line}
                      />
                      <VText
                        value={d.purchase_num}
                        title="采购数量"
                        line={line}
                      />
                      <VText
                        value={d.inbound_num}
                        title="入库数量"
                        line={line}
                      />
                    </div>
                  )),
              }}
            </VMore>
          </div>
        ),
      },
    },
    {
      title: "头程出库信息",
      field: "remark",
      minWidth: 250,
      slots: {
        default: ({ row, rowIndex }) => (
          <div>
            <VMore key={rowIndex}>
              {{
                default: (line) =>
                  (row.deliver || []).map((d) => (
                    <div class="w-full">
                      <VText
                        value={d.create_time}
                        title="下单时间"
                        line={line}
                      />
                      <VText value={d.order_no} title="出库单号" line={line} />
                      <VText
                        value={d.to_warehouse_name}
                        title="目的仓"
                        line={line}
                      />
                      <VText
                        value={d.channel_name}
                        title="物流渠道"
                        line={line}
                      />
                      <VText value={d.quantity} title="出库数量" line={line} />
                      <VText
                        value={d.plan_shipment_time}
                        title="预计发货日期"
                        line={line}
                      />
                      <VText
                        value={d.shipment_time}
                        title="实际发货日期"
                        line={line}
                      />
                      <VText value={d.status} title="状态" line={line} />
                    </div>
                  )),
              }}
            </VMore>
          </div>
        ),
      },
    },

    {
      title: "操作",
      width: 130,
      fixed: "right",
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: async ({ page, form }) => {
        await getTotal({ ...form, ...page });
        return purchaseDemandList({ ...form, ...page }).then((res) => {
          options.value.type.forEach((d) => {
            if (d.value === tabValue.value) {
              d.num = res.total;
            }
          });
          return res;
        });
      },
    },
  },
});
// 查询
const query = () => {
  tableRef?.value.query();
};
</script>
<style lang="scss" scoped></style>
